<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
      padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    /*搜索框样式调整*/
    .layui-form-item {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
<div class="layuimini-container"  style="height: 700px">
  <div class="layuimini-main">
    <!-- 搜索条件 -->
    <fieldset class="layui-elem-field">
      <legend>筛选条件</legend>
      <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
          <label class="layui-form-label">姓名</label>
          <div style="width: 100px" class="layui-input-inline">
            <input type="text" id="search_staffName" class="layui-input">
          </div>
          <label class="layui-form-label">合同类型</label>
          <div style="width: 100px" class="layui-input-inline">
            <select id="search_contractType" class="layui-input">
              <option value="">全部</option>
              <option value="新签合同">新签合同</option>
              <option value="续签合同">续签合同</option>
              <option value="变更合同">变更合同</option>
              <option value="劳务合同">劳务合同</option>
              <option value="收入合同">收入合同</option>
              <option value="支出合同">支出合同</option>
              <option value="施工合同">施工合同</option>
            </select>
          </div>
          <label class="layui-form-label">合同状态</label>
          <div style="width: 100px" class="layui-input-inline">
            <select id="search_contractState" class="layui-input">
              <option value="">全部</option>
              <option value="失效">失效</option>
              <option value="有效">有效</option>
              <option value="终止">终止</option>
              <option value="已签订">已签订</option>
              <option value="未签订">未签订</option>
            </select>
          </div>
          <label class="layui-form-label">合同到期</label>
          <div class="layui-inline" id="test6">
            <div style="width: 100px" class="layui-input-inline">
              <input style="width: 100px" type="text" id="test-startDate-1" class="layui-input">
            </div>
            <div  class="layui-form-mid">-</div>
            <div style="width: 100px" class="layui-input-inline">
              <input style="width: 100px" type="text"  id="test-endDate-1" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
          </div>
        </div>

      </div>
    </fieldset>
    <div>
      <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container" style="left: 100px">
        <button class="layui-btn layui-btn-sm" lay-event="insert_bp">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
      </div>
    </script>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit" id="updateStatusBtn">更多</a>
<!--      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="deleteBtn">删除</a>-->
    </script>
  </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="../../js/laydate.js" charset="utf-8"></script>
<script src="../../js/userAuth.js"></script>
<script>
  $(function () {
    $("#iReset").click(function () {      // 重置
      $("#search_staffName").val("");    // 设置value值
      $("#search_contractType").val("");
      $("#search_contractState").val("");
      $("#test-startDate-1").val("");
      $("#test-endDate-1").val("");
      search();
    });

    $("#searchVal").click(function () {   // 搜索
      var search_staffName = $("#search_staffName").val();   // 获取value值
      var search_contractType = $("#search_contractType").val();   // 获取value值
      var search_contractState = $("#search_contractState").val();   // 获取value值
      var startDate = $("#test-startDate-1").val();   // 获取value值
      var endDate = $("#test-endDate-1").val();   // 获取value值
      search(search_staffName,search_contractType,search_contractState,startDate,endDate);
    });

    search();
    function search(staffName,contractType,contractState,startDate,endDate) {   // js中默认不认形参的
      layui.use(['form','table','tree','miniTab'], function(){
        var table = layui.table;
        var form = layui.form;
        var miniTab = layui.miniTab;
        var json = {};
        if(staffName != null && staffName != "") {  // 如果搜索框中，用户传递了搜索值，则添加一个json条件数据
          json.staffName = staffName;             // js中的动态属性添加
          // 在json中添加一个key为staffName的值  {staffName: value}
        }
        if(contractType != null && contractType != "") {
          json.contractType = contractType;
        }
        if(contractState != null && contractState != "") {
          json.contractState = contractState;
        }
        if(startDate != null && startDate != "") {
          json.startDate = startDate;
        }
        if(endDate != null && endDate != "") {
          json.endDate = endDate;
        }
        // table默认数据渲染和分页处理
        table.render({   // 渲染数据
          elem: '#test'   // 获取table的id
          ,url:'/laborContract/selectForPage'    // 获取json数据
          ,where:json               // 添加的请求查询参数
          ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
          ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
          }]
          ,title: '证书表'
          ,cols: [[
            // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
            {type: 'checkbox', fixed: 'left'}
            ,{fixed:'left', title:'序号',align:'center', width:100, fixed: 'left', unresize: true, sort: true, templet: function(res){
                return '<em>'+ res.laborContractId +'</em>'
              }}
            ,{field:'staff.staffName', title:'员工',align:'center', width:120,  templet: function(res){
                return '<em>'+ res.staff.staffName +'</em>'
              }}
            ,{field:'contractType', title:'合同类型',align:'center', width:150, templet: function(res){
                  return '<em>'+res.contractType+'</em>'
              }}
            ,{field:'signTime', title:'签约时间',align:'center',sort: true, width:200, templet: function(res){
                if (res.signTime == null) {
                  return '<em>'+''+'</em>'
                }else {
                  return '<em>'+res.signTime+'</em>'
                }
              }}
            ,{field:'trialEndTime', title:'试用结束日期',align:'center',sort: true, width:200, templet: function(res){
                if (res.trialEndTime == null) {
                  return '<em>'+''+'</em>'
                }else {
                  return '<em>'+res.trialEndTime+'</em>'
                }
              }}
            ,{field:'contractState', title:'合同状态',align:'center',sort: true, width:120, templet: function(res){
                  return '<em>'+res.contractState+'</em>'
              }}
            ,{field:'failureTime', title:'合同到期时间',align:'center',sort: true, templet: function(res){
                if (res.failureTime == null) {
                  return '<em>'+''+'</em>'
                }else {
                  return '<em>'+res.failureTime+'</em>'
                }
              }}
            ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:120}

          ]]
          ,height:'516px'
          ,page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
          //获取选中行
          var checkStatus = table.checkStatus(obj.config.id).data;
          var ids = [];
          for(var i=0;i<checkStatus.length;i++){
            ids.push(checkStatus[i].laborContractId)
          }
          ids = ids.join(',');//必须要写，不然后台获取不到数据

          switch(obj.event){
            case 'insert_bp':
              var index = layer.open({
                title: '新增',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'contract.html',
              });
              $(window).on("resize", function () {
                layer.full(index);
              });
              break;
                  //自定义头工具栏右侧图标 - 提示
            case 'delete':
              console.log("ids:  "+ids)
              if (ids !== null && ids !== '') {
                layer.confirm("确认删除选中数据？", function (index) {
                  console.log("ids:" + ids)
                  $.ajax({
                    url: '/laborContract/deleteByIds',
                    method: 'post',
                    datatype: "text",
                    data: {ids: ids},
                    success: function (response) {
                      layer.msg(response.msg)
                    },
                    error: function (response) {
                      layer.msg(response.msg)
                    }
                  })
                  layer.close(index);
                  setTimeout(function () {
                    window.location.reload(); //刷新页面
                  }, 800)
                })
              }else {
                layer.msg("未选中数据！",{time :500})
              }
              break;
                  //自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
              layer.alert('这是工具栏右侧自定义的一个图标按钮');
              break;
          }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
          var data = obj.data;
          //console.log(obj)
          if(obj.event === 'del'){
            layer.confirm('删除后无法恢复，请再次确认！', function(index){
              obj.del();
              layer.close(index);
            });
          } else if(obj.event === 'edit'){
            const obj1 = JSON.stringify(obj.data);
            sessionStorage.setItem("rowData2",obj1);
            var index = layer.open({
              title: '详情',
              type: 2,
              shade: 0.2,
              maxmin:true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: 'contractDetail.html',
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
            return false;
          }
        });
      });
    }
  });

  //JS
  layui.use(['element', 'layer', 'util','tree'], function(){
    var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      ,menuRight: function(){
        layer.open({
          type: 1
          ,title: '更多'
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
          ,scrollbar: false
        });
      }
    });
  });
  //日期范围
  layui.use('laydate', function() {
    var laydate = layui.laydate;
    laydate.render({
      elem: '#test6'
      ,range: ['#test-startDate-1', '#test-endDate-1']
    });
  });

</script>
</body>
</html>